//商品评论
'use strict';
import React,{Component} from 'react';
import styles from '../style/styles';
import Util from '../common/util';
import Icon from 'react-native-vector-icons';
import Modal from 'react-native-modalbox';
import PhotoView from 'react-native-photo-view';
import * as URLconstant from '../constant/URLconstant';
import {
    View,
    Text,
    TouchableOpacity,
    ScrollView,
    Image,
    ListView,
    ActivityIndicatorIOS,
    ProgressBarAndroid
} from 'react-native';
export default class goodsComment extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.successGet = this.successGet.bind(this);
        //this.showComment=this.showComment.bind(this);
        this.errorGet = this.errorGet.bind(this);
        this.renderFooter = this.renderFooter.bind(this);
        this.onEndReached = this.onEndReached.bind(this);
        this.showComment = this.showComment.bind(this);
        this.state = {
            isOpen: false,
            commentNum: [1, 2, 3, 4, 5, 6],
            loaded: true,
            page: 1,
            dataSource2: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
            dataSource: [],
            isOver: false,

        };
    }

    componentDidMount() {
        this.getComment()

    }

    getComment() {
        let datas = this.props.datas;
        let page = this.state.page
        let goods = datas.goods;
        let goods_id = goods.goods_id;
        let datakey = [];
        datakey['goods_id'] = goods_id;
        datakey['page'] = page
        let url = URLconstant.GOODSCOMMENT_URL;
        Util.get(url, datakey, this.successGet, this.errorGet)
    }


    successGet(datas) {
        //LOG(datas)
        if (datas.status == -1) {
            this.setState({
                isOver: true,
                loaded: false,
            });
        } else {
            let data = datas.data;
            let list = data.list;
            let isOver = this.state.isOver;
            let page = this.state.page;
            let totalpage = data.totalpage;
            if (totalpage == page) {
                isOver = true;
            }
            if (list == '') {
                isOver = true;
            }
            let newDatas = list;
            let oldDatas = this.state.dataSource;
            Array.prototype.push.apply(oldDatas, newDatas);
            this.setState({
                dataSource2: this.state.dataSource2.cloneWithRows(oldDatas),
                dataSource: oldDatas,
                page: page + 1,
                isOver: isOver,
                loaded: false,

            });
        }

    }

    errorGet(err) {
        LOG(err)
    }


    openOrCloseModal(oc, picture) {
        let that = this;
        that.setState({
            picture: picture,
            isOpen: oc,

        })
    }

    showBigPic() {
        let picture = this.state.picture
        let isIos = Util.isIos();
        let style;
        if (isIos == true) {
            style = {width: Util.size.width, height: Util.size.width}
        } else {
            style = {width: Util.size.width, height: Util.size.height - 110}
        }
        return (
            <Modal isOpen={this.state.isOpen} backdropPressToClose={false} style={{backgroundColor:"rgba(0,0,0,.3)"}}
                   swipeThreshold={200}>
                <PhotoView
                    source={{uri:picture}}
                    minimumZoomScale={1}
                    maximumZoomScale={3}
                    androidScaleType="center"
                    onLoad={() => console.log("Image loaded!")}
                    style={style}
                    onTap={()=>this.openOrCloseModal(false)}
                />
            </Modal>
        )
    }


    //listView脚部
    renderFooter() {
        let that = this;
        let isIos = Util.isIos();
        if (that.state.isOver) {
            return (<View style={{alignItems:"center",width:Util.size.width,justifyContent:'center',margin:10,}}>
                    <Text>亲,只有这么多了哦...</Text>
                </View>
            );
        } else {
            if (isIos) {
                return (
                    <View style={{alignItems:"center",width:Util.size.width,justifyContent:'center',margin:10,}}>
                        <ActivityIndicatorIOS color="#ccc" style={{width:20,height:20,marginRight:20}}/>
                    </View>)
            } else {
                return (
                    <View style={{alignItems:"center",width:Util.size.width,justifyContent:'center',margin:10,}}>
                        <ProgressBarAndroid color="#ccc" style={{width:20,height:20,marginRight:20}}/>
                    </View>
                );
            }
        }

    }

    //listView上拉触发
    onEndReached() {
        let that = this;
        if (!that.state.isOver) {
            that.getComment();
        } else {
            //Toast.show('亲,只有这么多了哦...');
        }
    }

    Stars(rank) {
        let list = [];
        let row;
        for (let i = 0; i < parseInt(rank); i++) {
            row = (
                <Icon key={i} name={'star'} size={12} color={'#f65061'} style={styles.star_icon}/>
            )
            list.push(row)
        }
        return (
            <View style={styles.grade_wrap}>
                {list}
            </View>
        )
    }

    commentImg(read) {
        let pic = read[0].pic;
        let row;
        let list = [];
        for (let i in pic) {
            row = (
                <TouchableOpacity key={i} onPress={()=>this.openOrCloseModal(true,pic[i].picture)}>
                    <Image
                        resizeMode={'cover'}
                        style={styles.comment_img}
                        source={{uri:pic[i].picture}}
                    />
                </TouchableOpacity>
            )
            list.push(row)
        }
        return (
            <View style={styles.comment_img_wrap}>
                {list}
            </View>)
    }


    //展示评论
    showComment(datas) {
        //LOG(datas);
        return (
            <View style={styles.comment_wrap}>
                <View style={styles.comment_wrap_top}>
                    <View style={styles.comment_left}>
                        <Text style={styles.user_comment_name}>{datas.user_name}</Text>
                    </View>
                    <Text style={styles.comment_txt2}>{datas.add_time}</Text>
                </View>
                {this.Stars(datas.rank)}
                <Text style={styles.comment_txt}>{datas.title}</Text>
                {this.commentImg(datas.read)}
                {datas.specs == null || datas.specs == '' ?
                    null
                    :
                    <Text style={styles.comment_txt2}>{datas.specs.specification}</Text>
                }

            </View>
        )


    }

    render() {
        return (
            <View style={{flex:1}}>
                {
                    //this.commentName()
                }
                {this.state.loaded ?
                    <View>{
                        Util.loading()
                    }</View>
                    :
                    <ListView
                        contentContainerStyle={[styles.list]}
                        dataSource={this.state.dataSource2}
                        removeClippedSubviews={false}
                        renderRow={this.showComment}
                        renderFooter={this.renderFooter}
                        onEndReached={this.onEndReached}
                        onEndReachedThreshold={150}
                        initialListSize={10}
                        pageSize={10}
                    />
                }
                {this.showBigPic()}
            </View>
        )
    }
}